
Ext.Loader.setConfig({enabled: true});


//Ext.Loader.setPath('Ext.ux', '../../../scripts/extjs/examples/ux');
Ext.Loader.setPath('Ext.ux', '../../../otherscript/extjs/examples/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer',
    'Ext.ux.form.SearchField',
	'Ext.ux.grid.FiltersFeature',
	'Ext.toolbar.Paging',
	'Ext.ux.ajax.JsonSimlet',
    'Ext.ux.ajax.SimManager'
]);



    
    
    

Ext.onReady(function(){
	
	
  
    Ext.define('cfbose.clearancemonitoring', {
        extend: 'Ext.data.Model',
        fields: [
            'ID', 
			'PERSONNELIDNO',
			'LASTNAME',
			'FIRSTNAME', 
			'MIDDLENAME', 
			{
				name: 'DATERECEIVEDRL',
				type: 'date'
			},
			{
				name: 'DATEACCOMPLISHED',
				type: 'date'
			},
			'EXT',
			'POSITIONTITLE',
			'LEVEL',
			'COMPANY',
			'COSTCENTERCODE',
			'BRANDORGROUP',
			'DIVISION',
			'DEPARTMENT',
			'SECTION',
			'GENDER',
			{
				name: 'BIRTHDATE',
				type: 'date'
			},
			{
                name: 'AGE',
                type: 'int'
            },
			'CIVILSTATUS',
			'ADDRESS',
			'CONTACTNUM',
			'EMAILADD',
			{
				name: 'DATEHIRED',
				type: 'date'
			},
			{
				name: 'DATERESIGNEFFECT',
				type: 'date'
			},
			{
                name: 'TENUREPERYEAR',
                type: 'int'
            },
			{
                name: 'TENUREPERMONTH',
                type: 'int'
            },
			'EMPLOYMENTSTATUS',
			'IMMEDSUPERIOR',
			'DEPTHEAD',
			{
				name: 'DATEEMAILTOCLR',
				type: 'date'
			},
			{
				name: 'ISTAG',
				type: 'boolean'
			},
			{
				name: 'DATEREPLIEDIS',
				type: 'date'
			},
			'REMARKSIS',
			'DETAILIS',
			{
                name: 'TATIS',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDDH',
				type: 'date'
			},
			'REMARKSDH',
			'DETAILDH',
			{
                name: 'TATDH',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDSUN',
				type: 'date'
			},
			'REMARKSSUN',
			'DETAILSUN',
			{
                name: 'TATSUN',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDGLOBE',
				type: 'date'
			},
			'REMARKSGLOBE',
			'DETAILGLOBE',
			{
                name: 'TATGLOBE',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDBT',
				type: 'date'
			},
			'REMARKSBT',
			'DETAILBT',
			{
                name: 'TATBT',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDIAL',
				type: 'date'
			},
			'REMARKSIAL',
			'DETAILIAL',
			{
                name: 'TATIAL',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDIAW',
				type: 'date'
			},
			'REMARKSIAW',
			'DETAILIAW',
			{
                name: 'TATIAW',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDIT',
				type: 'date'
			},
			'REMARKSIT',
			'DETAILIT',
			{
                name: 'TATIT',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDACCT',
				type: 'date'
			},
			'REMARKSACCT',
			'DETAILACCT',
			{
                name: 'TATACCT',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDASSET',
				type: 'date'
			},
			'REMARKSASSET',
			'DETAILASSET',
			{
                name: 'TATASSET',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDTR',
				type: 'date'
			},
			'REMARKSTR',
			'DETAILTR',
			{
                name: 'TATTR',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDTTK',
				type: 'date'
			},
			'REMARKSTTK',
			'DETAILTTK',
			{
                name: 'TATTTK',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDTTM',
				type: 'date'
			},
			'REMARKSTTM',
			'DETAILTTM',
			{
                name: 'TATTTM',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDTTT',
				type: 'date'
			},
			'REMARKSTTT',
			'DETAILTTT',
			{
                name: 'TATTTT',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDRSC',
				type: 'date'
			},
			'REMARKSRSC',
			'DETAILRSC',
			{
                name: 'TATRSC',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDWC',
				type: 'date'
			},
			'REMARKSWC',
			'DETAILWC',
			{
                name: 'TATWC',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDA',
				type: 'date'
			},
			'REMARKSA',
			'DETAILA',
			{
                name: 'TATA',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDB',
				type: 'date'
			},
			'REMARKSB',
			'DETAILB',
			{
                name: 'TATB',
                type: 'int'
            },
			{
				name: 'DATEREPLIEDC',
				type: 'date'
			},
			'REMARKSC',
			'DETAILC',
			{
                name: 'TATC',
                type: 'int'
            },
			{
				name: 'DATECLEAREDFCD',
				type: 'date'
			},
			{
				name: 'DATEPROCCLEARANCE',
				type: 'date'
			},
			{
				name: 'DATECOMPLETEDLOA',
				type: 'date'
			},
			{
				name: 'DATEENDORSEDTP',
				type: 'date'
			},
			{
                name: 'POSTEMPTAT',
                type: 'int'
            },
			'REMARKSCOD',
			'CAUSEOFSEP',
			'PROCESSEDBY',
			{
				name: 'DATEFORWARDTPINIT',
				type: 'date'
			},
			{
                name: 'TATTPINT',
                type: 'int'
            },
			{
				name: 'DATEFORWARDTA',
				type: 'date'
			},
			{
                name: 'TATTA',
                type: 'int'
            },
			{
				name: 'DATEFORWARDTPE',
				type: 'date'
			},
			{
                name: 'TATPE',
                type: 'int'
            },
			{
                name: 'TERMINALPAYRESULT',
                type: 'int'
            },
			{
				name: 'DATEFORWARDTR',
				type: 'date'
			},
			{
				name: 'DATEAVAILOCATM',
				type: 'date'
			},
			{
                name: 'TATATM',
                type: 'int'
            },
			{
                name: 'TOTALNODAYSP',
                type: 'int'
            },
			'REMARKSFORWARD',
			{
				name: 'DATERELEASECOE',
				type: 'date'
			},
			{
				name: 'DATERELEASEFINALCOE',
				type: 'date'
			},
			{
				name: 'PROGRESS',
				type: 'number'
			}
			
			
			
        ],
        idProperty: 'controlnumber'
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        id: 'store',
        model: 'cfbose.clearancemonitoring',
        remoteGroup: true,
		remoteSort: true,
		buffered: true,
        leadingBufferZone: 1,
        pageSize: 20,
        proxy: {
            type: 'jsonp',
            url: '../../../app/controller/clearance/clearanceformmntrng/clearancedata.cfm',
			api: {
				create   : undefined,
				read     : '../../../app/controller/clearance/clearanceformmntrng/clearancedata.cfm',
				update   : undefined,
				destroyed: undefined
			},
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
			writer: {  
				type: 'json',
				root: 'form',
				writeAllFields: false
			},
			simpleSortMode: true,
			simpleGroupMode: true,
			groupParam: 'sort',
            groupDirectionParam: 'dir',
			filterParam: 'query',

            encodeFilters: function(filters) {
                return filters[0].value;
			},
			listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                },
				failure: function() {
					alert('error sync');  
				},
				success: function() {
					alert('success');
				}
            }
			
        },
		sorters: [{
            property: 'DATEACCOMPLISHED',
            direction: 'DESC'
        }],

		remoteFilter: true,
		//autoSync: true,
        autoLoad: true,
        listeners: {

            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            groupchange: function(store, groupers) {
                var sortable = !store.isGrouped(),
                    headers = grid.headerCt.getVisibleGridColumns(),
                    i, len = headers.length;
                
                for (i = 0; i < len; i++) {
                    headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
                }
            },

            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            beforeprefetch: function(store, operation) {
                if (operation.groupers && operation.groupers.length) {
                    delete operation.sorters;
                }
            }
        }
    });
	
	function onStoreSizeChange() {
        grid.down('#status').update({count: store.getTotalCount()});
    }

    function renderTopic(value, p, record) {
        return Ext.String.format(
            '<b>{0}</b>',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    }
	
	var filters = {
        ftype: 'filters',
        // encode and local configuration options defined previously for easier reuse
        encode: false, // json encode the filter query
        local: false,   // defaults to false (remote filtering)

        // Filters are most naturally placed in the column definition, but can also be
        // added here.
        filters: [{
            type: 'numeric',
            dataIndex: 'age'
        }]
    };
	
	
Ext.define('CompanyLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'companycode',
		type: 'string'
	},{
		name: 'companyname',
		type: 'string'
	}]
});		

Ext.define('PositionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'positioncode',
		type: 'string'
	},{
		name: 'positionname',
		type: 'string'
	}]
});	

Ext.define('LevelLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'levelcode',
		type: 'string'
	},{
		name: 'levelname',
		type: 'string'
	}]
});	

Ext.define('CostcenterLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'costcentercode',
		type: 'string'
	},{
		name: 'costcentername',
		type: 'string'
	}]
});	

Ext.define('BrandLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'brandcode',
		type: 'string'
	},{
		name: 'brandname',
		type: 'string'
	}]
});	

Ext.define('DivisionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'divisioncode',
		type: 'string'
	},{
		name: 'divisionname',
		type: 'string'
	}]
});	

Ext.define('DepartmentLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'departmentcode',
		type: 'string'
	},{
		name: 'departmentname',
		type: 'string'
	}]
});	

Ext.define('SectionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'sectioncode',
		type: 'string'
	},{
		name: 'sectionname',
		type: 'string'
	}]
});	

Ext.define('GenderLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'gendercode',
		type: 'string'
	},{
		name: 'gendername',
		type: 'string'
	}]
});	

Ext.define('CivilstatusLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'civilstatuscode',
		type: 'string'
	},{
		name: 'civilstatusname',
		type: 'string'
	}]
});	

Ext.define('EmploymentstatusLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'employmentstatuscode',
		type: 'string'
	},{
		name: 'employmentstatusname',
		type: 'string'
	}]
});	

Ext.define('CauseofseparationLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'causeofseparationcode',
		type: 'string'
	},{
		name: 'causeofseparationname',
		type: 'string'
	}]
});	

Ext.define('RemarksLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'remarkscode',
		type: 'string'
	},{
		name: 'remarksname',
		type: 'string'
	}]
});	

var remarkslk = Ext.create('Ext.data.Store', {
					model: 'RemarksLK',
					data: [{
						remarkscode: 'No Accountability',
						remarksname: 'No Accountability'
					},{
						remarkscode: 'With Accountability',
						remarksname: 'With Accountability'
					}]
				     
			  });

var causeofseparationlk = Ext.create('Ext.data.Store', {
					model: 'CauseofseparationLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/causeofseparation.cfm',
						reader: {
							type: 'json',
							root: 'causeofseparationlk'  
						}
						
					},
					autoLoad: true
				    
			  });

var employmentstatuslk = Ext.create('Ext.data.Store', {
					model: 'EmploymentstatusLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/employmentstatus.cfm',
						reader: {
							type: 'json',
							root: 'employmentstatuslk'
						}
						
					},
					autoLoad: true
				    
			  });

var civilstatuslk = Ext.create('Ext.data.Store', {
					model: 'CivilstatusLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/civilstatus.cfm',
						reader: {
							type: 'json',
							root: 'civilstatuslk'
						}
						
					},
					autoLoad: true
				    
			  });

var genderlk = Ext.create('Ext.data.Store', {
					model: 'GenderLK',
					data: [{
						gendercode: 'M',
						gendername: 'Male'
					},{
						gendercode: 'F',
						gendername: 'Female'
					}]
				    
			  });

var sectionlk = Ext.create('Ext.data.Store', {
					model: 'SectionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/section.cfm',
						reader: {
							type: 'json',
							root: 'sectionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var departmentlk = Ext.create('Ext.data.Store', {
					model: 'DepartmentLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/department.cfm',
						reader: {
							type: 'json',
							root: 'departmentlk'
						}
						
					},
					autoLoad: true
				    
			  });

var divisionlk = Ext.create('Ext.data.Store', {
					model: 'DivisionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/division.cfm',
						reader: {
							type: 'json',
							root: 'divisionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var brandlk = Ext.create('Ext.data.Store', {
					model: 'BrandLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/brand.cfm',
						reader: {
							type: 'json',
							root: 'brandlk'
						}
						
					},
					autoLoad: true
				    
			  });

var costcenterlk = Ext.create('Ext.data.Store', {
					model: 'CostcenterLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/costcenter.cfm',
						reader: {
							type: 'json',
							root: 'costcenterlk'
						}
						
					},
					autoLoad: true
				    
			  });

var levellk = Ext.create('Ext.data.Store', {
					model: 'LevelLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/level.cfm',
						reader: {
							type: 'json',
							root: 'levellk'
						}
						
					},
					autoLoad: true
				    
			  });
			  
var positionlk = Ext.create('Ext.data.Store', {
					model: 'PositionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/position.cfm',
						reader: {
							type: 'json',
							root: 'positionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var companylk =	Ext.create('Ext.data.Store', {
					model: 'CompanyLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/companydsn.cfm',
						reader: {
							type: 'json',
							root: 'companylk'
						}
						
					},
					autoLoad: true
				    
			   });



	var writetoexcel = function() {
		Ext.Ajax.request({
		    url: '../../../app/controller/clearance/clearanceformmntrng/gridtoexcel.cfm',
		    success: function(response){
		        var text = response.responseText;
				var findresult = text.indexOf('writenow');
				if(findresult >= 0) {
					
					window.location.href = "../../../app/controller/clearance/clearanceformmntrng/ClearanceData.xls";
					
				} else {
					Ext.Msg.show({
		  				title: 'Failed to export to excel',
		  				msg: 'There is a problem in exporting the record to excel' + text,
		  				buttons: Ext.Msg.OK,
		  				icon: Ext.Msg.ERROR
		  			});
				}
				
				//window.location.reload(); --> use this command only if you attempt to force the page refresh
				
		    }
		});
	}

var graphthis = function() {
	
Ext.define('DataGraph', {
	extend: 'Ext.data.Model',
	fields: [{
			name: 'dataname',
			type: 'string'
		},{
			name: 'datacode',
			type: 'string'
		}]
});

var datagraph =	Ext.create('Ext.data.Store', {
				model: 'DataGraph',
				data: [{
					dataname: 'Level',
					datacode: 'LEVEL'
				},{ 
					dataname: 'Position Title',
					datacode: 'POSITIONTITLE'
				},{ 
					dataname: 'Company',
					datacode: 'COMPANY'
				},{ 
					dataname: 'Cost Center Code',
					datacode: 'COSTCENTERCODE'
				},{ 
					dataname: 'Brand or Group',
					datacode: 'BRANDORGROUP'
				},{ 
					dataname: 'Division',
					datacode: 'DIVISION'
				},{ 
					dataname: 'Department',
					datacode: 'DEPARTMENT'
				},{ 
					dataname: 'Section',
					datacode: 'SECTION'
				},{ 
					dataname: 'Gender',
					datacode: 'GENDER'
				},{ 
					dataname: 'Age',
					datacode: 'AGE'
				},{ 
					dataname: 'Civil Status',
					datacode: 'CIVILSTATUS'
				}]
				
			    
		   });
			
Ext.define('ClearanceGraph', {
	extend: 'Ext.data.Model',
	fields: [{
			name: 'name',
			type: 'string'
		},{
			name: 'data',
			type: 'number'
		}]
});

var clearancestore =	Ext.create('Ext.data.Store', {
				model: 'ClearanceGraph',
				proxy: {
					type: 'ajax',
					url: '../../../data/graph/clearancegraph.cfm',
					reader: {
						type: 'json',
						root: 'clearancegraph'
					}
					
				},
				autoLoad: true
			    
		   });
		

		
		var chart = Ext.create('Ext.chart.Chart', {
		    renderTo: Ext.getBody(),
			title: 'Clearance Monitoring Graph',
		    width: 500,
			height: 350,
		    animate: true,
		    store: clearancestore,
		    theme: 'Base:gradients',
			legend: {
				position: 'right'
			},
		    series: [{
		        type: 'pie',
		        angleField: 'data',
		        showInLegend: true,
		        tips: {
		            trackMouse: true,
		            width: 250,
		            height: 28,
		            renderer: function(storeItem, item) {
		                // calculate and display percentage on hover
						 //this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' selected');
		                var total = 0;
		                clearancestore.each(function(rec) {
		                    total += rec.get('data');
		                });
						Ext.getCmp('displaytotalid').setValue(total);
		                this.setTitle(storeItem.get('name') + ': ' + Math.round((storeItem.get('data') / total) * 100) + '%');
						
						 
		            }
		        },
		        highlight: {
		            segment: {
		                margin: 20
		            }
		        },
		        label: {
		            field: 'name',
		            display: 'rotate',
		            contrast: true,
		            font: '18px Arial'
		        }
		    }]
		});
		
		
		Ext.create('Ext.window.Window', {
		    title: 'Clearance Monitoring Graph',
			closable: true,
		    height: 600,
		    width: 900,
		    layout: 'fit',
			tbar: [{
					xtype: 'datefield',
					format: 'n/j/Y',
					id: 'datefromfrom',
					fieldLabel: 'Date From',
					labelAlign: 'top',
					cls: 'field-margin',
					name: 'datefrom'
				},{
					xtype: 'datefield',
					format: 'n/j/Y',
					id: 'datetoto',
					fieldLabel: 'Date To',
					labelAlign: 'top',
					cls: 'field-margin',
					name: 'dateto'
				},{
					xtype: 'combobox',
					id: 'comboidid',
					fieldLabel: 'Data',
					labelAlign: 'top',
					cls: 'field-margin',
					name: 'datatograph',
					store: datagraph,
					queryMode: 'local',
					displayField: 'dataname',
				    valueField: 'datacode'
				},{
					xtype: 'displayfield',
					id: 'displaytotalid',
					labelAlign: 'top',
					fieldLabel: 'Total',
					cls: 'field-margin',
					name: 'displaytotal'
				},{
					xtype: 'button',
					cls: 'field-margin',
					text: 'Refresh',
					handler: function() {
						var datefrom = Ext.getCmp('datefromfrom').getValue();
						var dateto   = Ext.getCmp('datetoto').getValue();
						var datatograph = Ext.getCmp('comboidid').getValue();
						
						clearancestore.load({
							scope: this,
							params: {
								datefrom     :    datefrom,
								dateto       :      dateto,
								datatograph  : datatograph
							},
							//callback: function(records, operation, success) {
						        // the operation object
						        // contains all of the details of the load operation
						        //console.log(records);
						    //} 
						})
					}
				}],
			items: chart,
			listeners: {
					close: function(a, b) {
							clearancestore.removeAll();
						}
					}
		    
		}).show();
}

var emailclearingdept = function() {
	
	
Ext.define('ClrgroupLK', {
extend: 'Ext.data.Model',
fields: [{
		name: 'groupcode',
		type: 'string'
	},{
		name: 'groupname',
		type: 'string'
	}]
});	

var grouplk = Ext.create('Ext.data.Store', {
	model: 'ClrgroupLK',
	proxy: {
		type: 'ajax',
		url: '../../../data/lookup/clearingdeptgroup.cfm',
		reader: {
			type: 'json',
			root: 'grouplk'  
		}
		
	},
	autoLoad: true
    
});

Ext.define('TemplateLK', {
extend: 'Ext.data.Model',
fields: [{
		name: 'templatecode',
		type: 'string'
	},{
		name: 'templatename',
		type: 'string'
	}]
});	

var templatelk = Ext.create('Ext.data.Store', {
	model: 'TemplateLK',
	proxy: {
		type: 'ajax',
		url: '../../../data/lookup/gettemplate.cfm',
		reader: {
			type: 'json',
			root: 'templatelk'  
		}
		
	},
	autoLoad: true
    
});
	
var gettemplatenow = function(b, template) {
	
	Ext.Ajax.request({
		url: '../../../app/controller/clearance/clearanceformmntrng/getrecipients.cfm',
		params: {
			thegroup: b,
			thetemplate: template
		},
		success: function(response){
			var a = Ext.JSON.decode(response.responseText);
			if (a.success) {
				var recipients = a.data.recipients;
				var subject = a.data.subject;
				var body = a.data.body;
				var bodytpl = a.data.bodytemplate;
				var subjecttpl = a.data.subjecttemplate;
				Ext.getCmp('totoid').setValue(recipients);
				  
				
				var selectedRecord = gridclearance.getSelectionModel().getSelection()[0];
				
				if(!selectedRecord) {
					Ext.Msg.show({
		  				title: 'No record selected!',
		  				msg: 'Please select a record.',
		  				buttons: Ext.Msg.OK,
		  				icon: Ext.Msg.WARNING
		  			});
					emailwin.close();
					return true;
				}
				
				//var row = gridclearance.store.indexOf(selectedRecord);
				//grid.getCurrentPosition().row
				
				var data = {
					firstname           :   selectedRecord.data.FIRSTNAME,
					lastname            :   selectedRecord.data.LASTNAME,
					middlename          :   selectedRecord.data.MIDDLENAME,
					company             :   selectedRecord.data.COMPANY,
					causeofseparation   :   selectedRecord.data.CAUSEOFSEP,
					contactnumber       :   selectedRecord.data.CONTACTNUM,
					datehired           :   Ext.Date.format(selectedRecord.data.DATEHIRED, 'F d, Y'),
					emailaddress        :   selectedRecord.data.EMAILADD,
					personnelid         :   selectedRecord.data.PERSONNELIDNO,
					positiontitle       :   selectedRecord.data.POSITIONTITLE,
					dateeffective       :   Ext.Date.format(selectedRecord.data.DATERESIGNEFFECT, 'F d, Y')
				}; 
				
				var tpl = new Ext.XTemplate(bodytpl);
				var tpls = new Ext.XTemplate(subjecttpl);
				
				var appliedtpl = tpl.apply(data);
				Ext.getCmp('bodyid').setValue(appliedtpl); 
				
				var appliedtpl = tpls.apply(data);
				Ext.getCmp('subjectid').setValue(appliedtpl);
				
			}
		}
	});
};
	
	
var emailwin = Ext.create('Ext.window.Window', {
		    title: 'Email',
			closable: true,
		    height: 450,
		    width: 600,
		    layout: 'form',
			items: [{
					xtype: 'combobox',
					fieldLabel: 'Group',
					id: 'thegroupid',
					name: 'thegroup',
					store: grouplk,
					displayField: 'groupname',
					valueField: 'groupcode',
					listeners: {
						
						change: function(thiss, b) {
							if(b.length > 0 || thegroup != null) {
								gettemplatenow(b, 'no template');
							}
							return false;
							
						}
					},
					cls: 'field-margin'
				},{
					xtype: 'combobox',
					fieldLabel: 'Email Template',
					name: 'ibosetemplate',
					store: templatelk,
					displayField: 'templatename',
					valueField: 'templatecode',
					listeners: {
						change: function(thiss, template) {
							var thegroup = Ext.getCmp('thegroupid').getValue();
							if(thegroup) {
								gettemplatenow(thegroup, template);
							} else {
								Ext.Msg.show({
									msg: 'Please select a group.',
									buttons: Ext.Msg.OK,
									icon: Ext.Msg.WARNING
								});	
							}
							return false;
						}
					},
					cls: 'field-margin'
				},{
					xtype: 'textfield',
					id: 'totoid',
					fieldLabel: 'To',
					name: 'to',
					cls: 'field-margin'
				},{
					xtype: 'textfield',
					id: 'subjectid',
					fieldLabel: 'Subject',
					name: 'subject',
					cls: 'field-margin'
				},{
					xtype: 'htmleditor',
					height: 270,
					id: 'bodyid',
					name: 'body',
					cls: 'field-margin'
				},{
					xtype: 'button',
					text: 'Send',
					name: 'sendemailbutton',
					cls: 'field-margin',
					handler: function() {
						var thegroup = Ext.getCmp('thegroupid').getValue();
						var therecipients = Ext.getCmp('totoid').getValue();
						var thesubject = Ext.getCmp('subjectid').getValue();
						var thebody = Ext.getCmp('bodyid').getValue();
						
						var selectedRecord = gridclearance.getSelectionModel().getSelection()[0];
						var theid =   selectedRecord.data.ID;
						
						
						var recipientArr = therecipients.split(',');
						if (therecipients.length > 5) {
							for (var countr = 0; countr < recipientArr.length; countr++) {
							
								Ext.Ajax.request({
									url: '../../../app/controller/clearance/clearanceformmntrng/emailclearingdept.cfm',
									params: {
										thegroup: thegroup,
										therecipient: recipientArr[countr],
										thesubject: thesubject,
										thebody: thebody,
										theid: theid
									},
									success: function(response){
										var a = Ext.JSON.decode(response.responseText);
										if (a.success) {
										
										}
									},
									failure: function(response){
										Ext.Msg.show({
											msg: 'Unable to send to: ' + recipientArr[countr],
											buttons: Ext.Msg.OK,
											icon: Ext.Msg.ERROR
										});
									}
								});
								
							}
						} else {
							Ext.Msg.show({
								msg: 'Recipient is empty',
								buttons: Ext.Msg.OK,
								icon: Ext.Msg.ERROR
							});
							return true;
						}
						emailwin.close();
						
					}
				}],
				listeners: {
					close: function(a, b) {
							grouplk.removeAll();
						}
					}
			
			
		    
		}).show();
};
	
var clearancesettings = function() {
	window.open("../../../myapps/clearance/settings/","_blank","height=500,width=700,scrollbars=yes");
};
	

var gridclearance = Ext.create('Ext.grid.Panel', {
        layout: 'fit',
		height: 500,
		collapsible: true,
        title: 'Clearance Monitoring',
		features: [filters],
		plugins: [
	        Ext.create('Ext.grid.plugin.CellEditing', {
	            clicksToEdit: 2
	        })
	    ],
        store: store,
        loadMask: true,
        dockedItems: [{
            dock: 'top',
            xtype: 'toolbar',
            items: [{
                width: 400,
                fieldLabel: 'Search',
                labelWidth: 50,
                xtype: 'searchfield',
                store: store
            }, '->', {
                xtype: 'button',
                itemId: 'emailtoclearanceid',
                text: 'Email to Clearing Departments',
                style: 'margin-right:5px',
				handler: emailclearingdept
            }, '->', {
                xtype: 'button',
                itemId: 'emailtopayrollid',
                text: 'Email to Payroll',
                style: 'margin-right:5px',
				handler: emailclearingdept
            }, '->', {
                xtype: 'button',
                itemId: 'settingsId',
                text: 'Settings',
                style: 'margin-right:5px',
				handler: clearancesettings
            }, '->', {
                xtype: 'button',
                itemId: 'graphthisId',
                text: 'Graph',
                style: 'margin-right:5px',
				handler: graphthis
            }, '->',  {
                xtype: 'button',
                itemId: 'gridtoexcel',
                text: 'Export to Excel',
                style: 'margin-right:5px',
				handler: writetoexcel
            }, '->', {
                xtype: 'component',
                itemId: 'status',
                tpl: 'Matching threads: {count}',
                style: 'margin-right:5px'
            }]
        }],
        selModel: {
            pruneRemoved: false
        },
        multiSelect: true,
        viewConfig: {
            trackOver: false,
            emptyText: '<h1 style="margin:20px">No matching results</h1>'
        },
        // grid columns
        columns:[{
            xtype: 'rownumberer',
			locked: true,
            width: 50,
            sortable: false
        },{
			text: 'Progress',
			width: 110,
			locked: true,
			dataIndex: 'PROGRESS',
			renderer: function (value, m, r) {
					var id = Ext.id();
					Ext.defer(function () {
						Ext.widget('progressbar', {
							renderTo: id,
							text: value + ' %',
							value: value / 100,
							width: 100
						});
					}, 50);
					return Ext.String.format('<div id="{0}"></div>', id);
				}
		},{
            text: "Reference Number",
			dataIndex: 'ID',
			filterable: true,
            width: 100,
            hidden: false,
            sortable: true
        },{
            text: "Last Name",
			locked: true,
            dataIndex: 'LASTNAME',
            width: 150,
			editor: 'textfield',
            renderer: renderTopic,
            sortable: true,
			filterable: true
        },{
            text: "First Name",
			locked: true,
            dataIndex: 'FIRSTNAME',
			editor: 'textfield',
            width: 100,
			editor: 'textfield',
            sortable: true,
			filterable: true
        
		},{
			text: 'Date Received Resignation Letter',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATERECEIVEDRL',
			editor: 'datefield',
			filterable: true,
			align: 'center',
			width: 170,
			sortable: true
		},{
			text: 'Date Accomplished',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEACCOMPLISHED',
			editor: 'datefield',
			filterable: true,
			align: 'center',
			width: 100,
			sortable: true
		},{
            text: "Middle Name",
            dataIndex: 'MIDDLENAME',
			editor: 'textfield',
			align: 'center',
            width: 150,
			editor: 'textfield',
            sortable: true,
			filterable: true
        
		},{
            text: "Personnel ID",
            dataIndex: 'PERSONNELIDNO',
			editor: 'textfield',
			align: 'center',
            width: 140,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Ext.",
            dataIndex: 'EXT',
			editor: 'textfield',
			align: 'center',
            width: 150,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Position Title",
            dataIndex: 'POSITIONTITLE',
			align: 'center',
            width: 200,
			editor: {
				store: positionlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'positionname',
				valueField: 'positioncode'
			},
            sortable: true,
			filterable: true
        },{
            text: "Level",
            dataIndex: 'LEVEL',
			align: 'center',
            width: 150,
			editor: {
				store: levellk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'levelname',
				valueField: 'levelcode'
			},
            sortable: true,
			filterable: true
        },{
            text: "Company Reference",
            dataIndex: 'COMPANY',
			align: 'center',
            width: 250,
			editor: {
				store: companylk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'companyname',
				valueField: 'companycode'
			},   
            sortable: true,
			filterable: true
        },{
            text: "Cost Center Code",
            dataIndex: 'COSTCENTERCODE',
			align: 'center',
            width: 150,
			editor: {
				store: costcenterlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'costcentername',
				valueField: 'costcentercode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Brand or Group",
            dataIndex: 'BRANDORGROUP',
			align: 'center',
            width: 150,
			editor: {
				store: brandlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'brandname',
				valueField: 'brandcode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Division",
            dataIndex: 'DIVISION',
			align: 'center',
            width: 150,
			editor: {
				store: divisionlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'divisionname',
				valueField: 'divisioncode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Department",
            dataIndex: 'DEPARTMENT',
			align: 'center',
            width: 200,
			editor: {
				store: departmentlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'departmentname',
				valueField: 'departmentcode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Section",
            dataIndex: 'SECTION',
			align: 'center',
            width: 150,
			editor: {
				store: sectionlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'sectionname',
				valueField: 'sectioncode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Gender",
            dataIndex: 'GENDER',
			align: 'center',
            width: 50,
			editor: {
				store: genderlk,
				queryMode: 'local',
				xtype: 'combobox',
				displayField: 'gendername',
				valueField: 'gendercode'
			},  
            sortable: true,
			filterable: true
        },{
			text: 'Birth Date',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'BIRTHDATE',
			filterable: true,
			align: 'center',
			width: 100,
			sortable: true
		},{
            text: "Age",
            dataIndex: 'AGE',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Civil Status",
            dataIndex: 'CIVILSTATUS',
			align: 'center',
            width: 70,
			editor: {
				store: civilstatuslk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'civilstatusname',
				valueField: 'civilstatuscode'
			},  
            sortable: true,
			filterable: true
        },{
            text: "Address",
            dataIndex: 'ADDRESS',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Contact Number",
            dataIndex: 'CONTACTNUM',
			align: 'center',
            width: 100,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Email Address",
            dataIndex: 'EMAILADD',
			align: 'center',
            width: 150,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Hired',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEHIRED',
			filterable: true,
			align: 'center',
			width: 100,
			sortable: true
		},{
			text: 'Effective Date of Resignation',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATERESIGNEFFECT',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Tenure per Year",
            dataIndex: 'TENUREPERYEAR',
			align: 'center',
            width: 100,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Tenure per Month",
            dataIndex: 'TENUREPERMONTH',
			align: 'center',
            width: 100,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Employment Status",
            dataIndex: 'EMPLOYMENTSTATUS',
			align: 'center',
            width: 100,
			editor: {
				store: employmentstatuslk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'employmentstatusname',
				valueField: 'employmentstatuscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Immediate Superior",
            dataIndex: 'IMMEDSUPERIOR',
			align: 'center',
            width: 200,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Department Head",
            dataIndex: 'DEPTHEAD',
			align: 'center',
            width: 200,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Emailed to Clearing Dept',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEEMAILTOCLR',
			filterable: true,
			align: 'center',
			width: 180,
			sortable: true
		},{
			text: 'Date Replied - Immediate Superior',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDIS',
			tdCls: 'is-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSIS',
			tdCls: 'is-color',
			align: 'center',
            width: 100,
			editor: {
				store: remarkslk,
				queryMode: 'local',
				xtype: 'combobox',
				displayField: 'remarksname',
				valueField: 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILIS',
			tdCls: 'is-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATIS',
			tdCls: 'is-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Dept Head',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDDH',
			tdCls: 'dh-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSDH',
			tdCls: 'dh-color',
			align: 'center',
            width: 100,
			editor: {
				store: remarkslk,
				queryMode: 'local',
				xtype: 'combobox',
				displayField: 'remarksname',
				valueField: 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILDH',
			tdCls: 'dh-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATDH',
			tdCls: 'dh-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - SUN',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDSUN',
			tdCls: 'sun-color',
			filterable: true,
			align: 'center',
			width: 120,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSSUN',
			tdCls: 'sun-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILSUN',
			tdCls: 'sun-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATSUN',
			tdCls: 'sun-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Globe',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDGLOBE',
			tdCls: 'globe-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSGLOBE',
			tdCls: 'globe-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILGLOBE',
			tdCls: 'globe-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATGLOBE',
			tdCls: 'globe-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Benefits',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDBT',
			tdCls: 'benefits-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSBT',
			tdCls: 'benefits-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILBT',
			tdCls: 'benefits-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATBT',
			tdCls: 'benefits-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Internal Audit A',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDIAL',
			tdCls: 'audit-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSIAL',
			tdCls: 'audit-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILIAL',
			tdCls: 'audit-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATIAL',
			tdCls: 'audit-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Internal Audit B',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDIAW',
			tdCls: 'auditb-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSIAW',
			tdCls: 'auditb-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILIAW',
			tdCls: 'auditb-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATIAW',
			tdCls: 'auditb-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - IT',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDIT',
			tdCls: 'it-color',
			filterable: true,
			align: 'center',
			width: 120,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSIT',
			tdCls: 'it-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILIT',
			tdCls: 'it-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATIT',
			tdCls: 'it-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Accounting',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDACCT',
			tdCls: 'acct-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSACCT',
			tdCls: 'acct-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILACCT',
			tdCls: 'acct-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TATIT",
            dataIndex: 'TATACCT',
			tdCls: 'acct-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Asset',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDASSET',
			tdCls: 'asset-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSASSET',
			tdCls: 'asset-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILASSET',
			tdCls: 'asset-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATASSET',
			tdCls: 'asset-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Treasury',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDTR',
			tdCls: 'treasury-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSTR',
			tdCls: 'treasury-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILTR',
			tdCls: 'treasury-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATTR',
			tdCls: 'treasury-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - KFC Technical Training',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDTTK',
			tdCls: 'kfc-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSTTK',
			tdCls: 'kfc-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILTTK',
			tdCls: 'kfc-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATTTK',
			tdCls: 'kfc-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - MD Technical Training',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDTTM',
			tdCls: 'md-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSTTM',
			tdCls: 'md-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILTTM',
			tdCls: 'md-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATTTM',
			tdCls: 'md-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - T2 Technical Training',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDTTT',
			tdCls: 'ttwo-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSTTT',
			tdCls: 'ttwo-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILTTT',
			tdCls: 'ttwo-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATTTT',
			tdCls: 'ttwo-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - RSC Technical Training',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDRSC',
			tdCls: 'rsc-color',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSRSC',
			tdCls: 'rsc-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILRSC',
			tdCls: 'rsc-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATRSC',
			tdCls: 'rsc-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - We Care',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDWC',
			tdCls: 'we-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSWC',
			tdCls: 'we-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILWC',
			tdCls: 'we-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATWC',
			tdCls: 'we-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Other A',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDA',
			editor: 'datefield',
			tdCls: 'is-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSA',
			tdCls: 'is-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILA',
			tdCls: 'is-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATA',
			tdCls: 'is-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Other B',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDA',
			editor: 'datefield',
			tdCls: 'dh-color',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSB',
			tdCls: 'dh-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILB',
			tdCls: 'dh-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATB',
			tdCls: 'dh-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Replied - Other C',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEREPLIEDA',
			tdCls: 'sun-color',
			editor: 'datefield',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "Remarks",
            dataIndex: 'REMARKSC',
			tdCls: 'sun-color',
			align: 'center',
            width: 100,
			editor: {
				store          : remarkslk,
				queryMode      : 'local',
				xtype          : 'combobox',
				displayField   : 'remarksname',
				valueField     : 'remarkscode'
			}, 
            sortable: true,
			filterable: true
        },{
            text: "Details",
            dataIndex: 'DETAILC',
			tdCls: 'sun-color',
			align: 'center',
            width: 300,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "TAT",
            dataIndex: 'TATC',
			tdCls: 'sun-color',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Cleared from Clearing Dept',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATECLEAREDFCD',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 200,
			sortable: true
		},{
			text: 'Date Processed Clearance',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEPROCCLEARANCE',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 150,
			sortable: true
		},{
			text: 'Date Completed - list of accountabilities',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATECOMPLETEDLOA',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 250,
			sortable: true
		},{
			text: 'Date Endorsed to Payroll',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEENDORSEDTP',
			editor: 'datefield',
			filterable: true,
			align: 'center',
			width: 150,
			sortable: true
		},{
            text: "TAT - Post Employment",
            dataIndex: 'POSTEMPTAT',
			align: 'center',
            width: 150,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Remarks or cause of delay if any",
            dataIndex: 'REMARKSCOD',
			align: 'center',
            width: 200,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Cause of Separation",
            dataIndex: 'CAUSEOFSEP',
			align: 'center',
            width: 150,
			editor: {
				store: causeofseparationlk,
				queryMode: 'server',
				xtype: 'combobox',
				displayField: 'causeofseparationname',
				valueField: 'causeofseparationcode'
			},
            sortable: true,
			filterable: true
        },{
            text: "Processed By",
            dataIndex: 'PROCESSEDBY',
			align: 'center',
            width: 120,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Forwarded to Post Employment',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEFORWARDTPINIT',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 200,
			sortable: true
		},{
            text: "TAT",
            dataIndex: 'TATTPINT',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Forwarded to Accounting',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEFORWARDTA',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 180,
			sortable: true
		},{
            text: "TAT",
            dataIndex: 'TATTA',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Forwarded to Post Employment the final computation',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEFORWARDTPE',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 310,
			sortable: true
		},{
            text: "TAT",
            dataIndex: 'TATPE',
			align: 'center',
            width: 50,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Terminal Pay Results",
            dataIndex: 'TERMINALPAYRESULT',
			align: 'center',
            width: 130,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Forwarded to Treasury',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEFORWARDTR',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 160,
			sortable: true
		},{
			text: 'Date Availability of cheque/loaded to ATM',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATEAVAILOCATM',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 300,
			sortable: true
		},{
            text: "TAT",
            dataIndex: 'TATATM',
			align: 'center',
            width: 40,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Total No. of Days Processed",
            dataIndex: 'TOTALNODAYSP',
			align: 'center',
            width: 200,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
            text: "Remarks or cause of delay if any",
            dataIndex: 'REMARKSFORWARD',
			editor: 'textfield',
			align: 'center',
            width: 200,
			editor: 'textfield',
            sortable: true,
			filterable: true
        },{
			text: 'Date Release of Temporary COE',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATERELEASECOE',
			editor: 'datefield',
			filterable: true,
			align: 'center',
			width: 200,
			sortable: true
		},{
			text: 'Date Release of Final COE',
			renderer: Ext.util.Format.dateRenderer('n/j/Y'),
			dataIndex: 'DATERELEASEFINALCOE',
			filterable: true,
			editor: 'datefield',
			align: 'center',
			width: 150,
			sortable: true
		},{
			text: 'Progress',
			width: 120,
			dataIndex: 'PROGRESS',
			renderer: function (value, m, r) {
					var id = Ext.id();
					Ext.defer(function () {
						Ext.widget('progressbar', {
							renderTo: id,  
							text: value + ' %',
							value: value / 100,  
							width: 100
						});
					}, 50);
					return Ext.String.format('<div id="{0}"></div>', id);
				}
		}],
	
        renderTo: Ext.getBody()
    });
	
	
	gridclearance.on('edit', function(editor, e) {
		
		
		//check if new and old value, disregard saving if the same
		if (e.value == e.originalValue) {
			return true;
		}
		
		Ext.Ajax.request({
		    url: '../../../app/controller/clearance/clearanceformmntrng/saveclearancedata.cfm',
			success: function(response){
		        var text = response.responseText;
				var findresult = text.indexOf('success');
				if(findresult > 0) {
					return true;
				} else {
					Ext.Msg.show({
		  				title: 'Failed to save!',
		  				msg: 'There is a problem in saving the data' + text,
		  				buttons: Ext.Msg.OK,
		  				icon: Ext.Msg.ERROR
		  			});
				}
				
		    },
			params: {
				referencenumber: e.record.data.ID,
				field: e.field,
				value: e.value
			}
		});
		
	 //e.record.commit();
	
    });
    
	
    
});